<template>
    <div>
        <a-button type="primary" @click="showModal" class="register1" v-if="$store.state.login">
            登录/注册
        </a-button>
        <a-dropdown v-else>
            <div class="userimg ant-dropdown-link" @click="e => e.preventDefault()">
                <img :src="$store.state.userInfo.avatarUrl" v-if="showImg">
                <a-avatar icon="user" v-else style=""/>
                <span style="color: black;">{{ $store.state.userInfo.nickname }}</span>
            </div>
            <a-menu slot="overlay">
                <a-menu-item>
                    <router-link to="/user">个人中心</router-link>
                </a-menu-item>
                <a-menu-item>
                    <router-link to="/user">我的课程</router-link>
                </a-menu-item>
                <a-menu-item>
                    <router-link to="/user">我的订单</router-link>
                </a-menu-item>
                <a-menu-item>
                    <span @click="loginOut">退出登录</span>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
      <a-modal
        :visible="visible"
        :confirm-loading="confirmLoading"
        @cancel="handleCancel"
        :footer="null"
      >
        <div>
            <a-tabs default-active-key="1" @change="callback" class="tabTitle">
                <!-- 普通登录 -->
                <a-tab-pane key="1" tab="普通登录">
                    <a-form
                        id="components-form-demo-normal-login"
                        :form="form"
                        class="login-form"
                        @submit="handleSubmit"
                    >
                        <a-form-item>
                        <a-input
                            v-decorator="[
                            'userName',
                            { rules: [{ required: true, message: '请输入账户名!' }] },
                            ]"
                            placeholder="请输入账户名"
                        >
                            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                        </a-form-item>
                        <a-form-item>
                        <a-input
                            v-decorator="[
                            'password',
                            { rules: [{ required: true, message: '请输入密码!' }] },
                            ]"
                            type="password"
                            placeholder="请输入密码"
                        >
                            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                        </a-form-item>
                        <a-form-item>
                        <a-button type="primary" html-type="submit" class="login-form-button" 
                        @ok="handleOk">
                            登录
                        </a-button>
                        <a href="javascript:void(0)" @click="showRegisterModal">立即注册</a>
                        <a class="login-form-forgot" href="">忘记密码</a>
                        </a-form-item>
                    </a-form>
                </a-tab-pane>
                <a-tab-pane key="2" tab="手机号登录" force-render>
                    <phoneView></phoneView>
                </a-tab-pane>
            </a-tabs>
        </div>
      </a-modal>
      <a-modal
        :visible="registerVisible"
        @cancel="handleRegisterCancel"
        :footer="null"
      >
        <registerView :visible="registerVisible" />
      </a-modal>
    </div>
  </template>
  <script>
  import { getLogin } from '@/api/request';
  import registerView from './components/registerView';
  import phoneView from './components/phoneView';
  function hasErrors(fieldsError) {
    return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
  export default {
    data() {
      return {
        showImg: false,
        visible: false,
        confirmLoading: false,
        hasErrors,
        registerVisible: false,
        form: this.$form.createForm(this, { name: 'horizontal_login' }),
      };
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'normal_login' });
    },
    created() {
        if (this.$store.state.userInfo.avatarUrl) {
            this.showImg = true; 
            }else {
                this.showImg = false; 
            }
        },
    mounted() {
            this.$nextTick(() => {
            // To disabled submit button at the beginning.
            this.form.validateFields();
        });
    },
    components: {
        registerView, 
        phoneView,
    },
    methods: {
        handleOk() {
            this.visible = false;
        },
        handleCancel() {
            this.visible = false; 
        },
        showModal() {
            this.visible = true;
        },
        callback(key) {
            console.log(key);
        },
        userNameError() {
            const { getFieldError, isFieldTouched } = this.form;
            return isFieldTouched('userName') && getFieldError('userName');
        },
        passwordError() {
            const { getFieldError, isFieldTouched } = this.form;
            return isFieldTouched('password') && getFieldError('password');
        },
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                console.log('接收到的表单中的值：', values);
                    getLogin(values.userName,values.password).then(res=>{
                        if(res.code == 0) {
                            this.visible = false; // 隐藏登录对话框
                            this.$store.commit('setUserInfo', res.userInfo);
                            this.$store.commit('setLogin',false); 
                        }
                    })
                }
            });
        },
        loginOut() {
        //   this.$store.commit('setUserInfo', {}); 
            this.$store.commit('setLogin', true); 
        //   localStorage.removeItem('userInfo');
            localStorage.clear();
            this.$router.push('/');
        },
        showRegisterModal() {
            this.registerVisible = true; // 显示注册对话框
            this.visible = false; // 隐藏登录对话框
        },
        handleRegisterCancel() {
          this.registerVisible = false; // 隐藏注册对话框
        },
    },
  };
  </script>
<style lang="scss" scoped>
.register1 {
    width: 94px;
    height: 30px;
    background: #fff;
    border: none;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    color: #00cf8c;
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    &:hover,
    &:focus {
        background: #fff;
        border: none;
        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
        color: #00cf8c;
    }
}
.login-form-button {
    background-color: #00cf8c;
    border: none;
    &:hover,
    &:focus {
        background-color: #00cf8c;
        border: none;
    }
}
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
::v-deep .ant-tabs-tab-active {
color: #00cf8c !important; /* 激活状态下的背景颜色 */
background-color: #fff !important; /* 激活状态下的文本颜色 */
}

::v-deep .ant-tabs-tab {
    background-color: #fff; /* 未激活状态下的背景颜色 */
    color: #808080; /* 未激活状态下的文本颜色 */
    width: 150px!important;
    border: none!important;
    margin: 0 auto!important;
    text-align: center;
    &:hover {
        color: #00cf8c!important;
    }
}
::v-deep .ant-tabs-bar{
    border: none!important;
    margin-left: 80px!important;
}
::v-deep .ant-tabs-ink-bar{
    background-color: #00cf8c!important;
}
.userimg {
    // line-height: 32px;
    font-size: 16px;
    position: relative;
    >img{
        width: 32px;
        height: 32px;
        object-fit: cover;
        border-radius: 50%;
    }
    >span {
        font-weight: 600;
        margin-left: 5px;
    }
}

</style>
  